<template>
  <el-row :class="personLogin.loginbg?'personLogin':'adminLogin'"
          :style="personLogin.loginbg?'background-image:url('+personLogin.loginbg+')':''">
    <div class="Logintitle">
      <a href="javascript:;">
        <img :src="personLogin.logo?personLogin.logo:'static/img/loginlogo.png'" alt="Logo">
      </a>
      <h2 v-show="!personLogin.logo">物联网人工智能大数据引擎云平台<span>Internet of Things + Artificial Intelligence + Big Data Cloud Platform</span>
      </h2>
    </div>
    <div class="login_wrap clear">
      <div class="login_lk">
        <img id="log_img" src="static/img/login_lkdq.png">
      </div>
      <div class="logindiv" :style="(personLogin.loginbg&&personLogin.loginSite)?personLogin.loginSite:''">
        <el-col :span='5' :offset="8" class="loginfrom">
          <img class="personLogo" v-if="personLogin.loginLogoShow" :src="personLogin.logo" alt="logo">
          <h3>登录</h3>
          <el-form :model="ruleForm2" status-icon :rules="rules2" @submit.native.prevent ref="ruleForm2"
                   label-width="100px" class="demo-ruleForm">
            <el-form-item class="login_input" prop="user">
              <i class="iconfont icon-ren"></i>
              <el-input v-model="ruleForm2.user" :autofocus="ruleForm2.user?false:true"
                        placeholder="请输入您的账号"></el-input>
            </el-form-item>
            <el-form-item class="login_input" prop="pass">
              <i class="iconfont icon-suo"></i>
              <el-input type="password" v-model="ruleForm2.pass" :autofocus="ruleForm2.user?true:false "
                        autocomplete="off" placeholder="请输入您的密码"></el-input>
            </el-form-item>
            <!-- <el-form-item class="login_input" prop="code" >
               <i class="iconfont icon-yanzhengma"></i>
             <el-input v-model="ruleForm2.code" placeholder="请输入验证码"></el-input>
                 <div class="code">
                     <a href="javascript:;" >换一换?</a>
                     <span></span>
                 </div>
           </el-form-item> -->
            <!-- <div class="save">
              <input type="checkbox">
              <label>记住密码</label>
              <a href="javascript:;" >忘记密码?</a>
            </div> -->
            <el-form-item class="ma-le">
              <el-button class="login_button" :style="personLogin.loginLogoShow?'':'float:none;'" type="primary"
                         native-type="submit" @click="submitForm('ruleForm2')">登录
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </div>
    </div>
    <div class="loginLoad" v-show="loginLoad">
      <div>Loading</div>
    </div>
  </el-row>
</template>
<style lang="scss">
  .clear {
    &::after {
      content: "";
      display: block;
      clear: both;
    }

    &::before {
      content: "";
      display: block;
      clear: both;
    }
  }

  #app {
    .adminLogin {
      position: fixed;
    }
  }

  .adminLogin {
    z-index: 9;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: 53px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("/static/img/loginbg.jpg") no-repeat;
    background-size: cover;

    #space {
      width: 100%;
      position: absolute;
    }

    .Logintitle {
      display: flex;
      align-items: center;
      height: 53px;

      a {
        display: inline-block;
        margin-left: 57px;

        img {
          max-width: 175px;
          max-height: 58px;
        }
      }

      h2 {
        margin-left: 18px;
        display: inline-block;
        vertical-align: top;
        line-height: 1;
        font-size: 27.43px;
        letter-spacing: 10.3px;
        color: #fff;
        font-weight: 500;
        position: relative;

        // background-color: #4158D0;
        // background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #4384b5 100%);
        // -webkit-background-clip: text;
        // color: transparent;

        span {
          font-size: 14.84px;
          display: inline-block;
          letter-spacing: 1px;
          white-space: nowrap;
          position: absolute;
          bottom: -25px;
          border-bottom: 1px solid #fff;
          padding-bottom: 3px;
          left: 0;
          // background-color: #4158D0;
          // background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #4384b5 100%);
          //   -webkit-background-clip: text;
          //   color: transparent;
        }
      }
    }

    .login_wrap {
      width: 90%;
      top:50%;
      transform: translateY(-50%);
      position: absolute;
      display: flex;
      justify-content:center;
      -webkit-box-align: center;
      align-items: center;
      .login_lk {
        float: left;
        margin-top: 4%;
        position: relative;
        width: 49%;
        @keyframes leftnright {
          0% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(30px);
          }
          100% {
            transform: translateY(0);
          }
        }

        #log_img {
          animation: leftnright 10s ease-in-out infinite;
        }
      }
    }

    .logindiv {
      margin-top: 10%;
      max-width: 528px;
      width: 49%;
      background-image: url("/static/img/login_divbg2.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      float: right;
      position: relative;

      .loginfrom {
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        z-index: 99;
        padding: 50px 83px 55px;
        text-align: center;

        .personLogo {
          display: none;
        }

        h3 {
          color: #fff;
          font-size: 24px;
          font-weight: 500;
          letter-spacing: 3px;
          padding-left: 3px;
          line-height: 1;
        }

        form {
          .save {
            margin-top: 16px;
            color: #dbefff;
            font-size: 14px;
            text-align: left;

            input {
              width: 14px;
              height: 14px;
              border-color: #00e1f5;
              position: relative;
              top: 2px;
            }

            a {
              color: #dbefff;

              &:hover {
                color: #074494;
              }

              float: right;
            }
          }

          .ma-le {
            .el-form-item__content {
              margin-left: 0 !important;

              .login_button {
                margin: 40px auto 0;
                padding: 0;
                width: 100%;
                height: 46px;
                display: block;
                outline: none;
                border: 1px solid #c5defc;
                border-radius: 23px;
                line-height: 46px;
                color: #dbefff;
                font-size: 18px;
                letter-spacing: 3px;
                padding-left: 3px;
                background: transparent;
                transition: all 0.4s;

                &:hover {
                  opacity: 0.9;
                  background: #fff;
                  color: #4898f9;

                }
              }
            }
          }

          .login_input {
            &:first-child {
              margin-top: 24px;
            }

            margin: 32px auto 0;
            width: 100%;
            line-height: 40px;

            .el-form-item__content {
              .iconfont {
                font-size: 24px;
                float: left;
                display: block;
                color: #dbefff;
                margin-left: 3px;
                margin-top: 2px;
              }

              margin-left: 0 !important;
              height: 100%;
              width: 100%;
              border-bottom: 1px solid #cae4fe;

              .el-input {
                width: 90%;
                height: 100%;
                position: relative;
                display: inline-block;
                text-align: left;
                margin-top: 4px;

                input {
                  width: 100%;
                  height: 100%;
                  line-height: 36px;
                  height: 36px;
                  font-size: 16px;
                  color: #dbefff;
                  outline: none;
                  border: none;
                  background: transparent;

                  &::-webkit-input-placeholder {
                    color: #dbefff;
                  }
                }
              }

              .code {
                position: absolute;
                right: 30px;
                top: 0;

                span {
                  display: block;
                  height: 36px;
                  width: 100px;
                  background: #fff;
                  float: right;
                  margin-right: 7px;
                }

                a {
                  color: #dbefff;
                  float: right;
                  text-decoration: underline;
                }
              }
            }
          }

          .el-form-item.is-error {
            .el-form-item__content {
              border-color: #f65f5f;
            }

            .el-input__validateIcon {
              color: #d9e5fe;
            }
          }

          .el-form-item.is-success {
            .el-input__validateIcon {
              color: #d9e5fe;
            }
          }

          .el-form-item__error {
            color: #f65f5f;
            padding-top: 7px;
          }
        }
      }
    }
  }

  .personLogin {
    z-index: 9;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .Logintitle {
      display: none;
    }

    .login_wrap {
      width: 100%;

      .login_lk {
        display: none;
      }
    }

    .logindiv {
      max-width: 430px;
      width: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.5);
      float: right;
      border-radius: 5px;

      .loginfrom {
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        z-index: 99;
        padding: 30px 35px 10px;
        text-align: center;

        .personLogo {
          display: block;
          position: absolute;
          left: 20px;
          bottom: 10px;
          max-width: 30%;
          max-height: 60px;
        }

        h3 {
          display: none;
        }

        form {
          .save {
            margin-top: 16px;
            color: #121212;
            font-size: 14px;
            text-align: left;

            input {
              width: 14px;
              height: 14px;
              border-color: #b2bfc7;
              position: relative;
              top: 2px;
            }

            a {
              color: #121212;

              &:hover {
                color: #7f8a97;
              }

              float: right;
            }
          }

          .ma-le {
            .el-form-item__content {
              margin-left: 0 !important;

              .login_button {
                margin: 30px auto 0;
                padding: 0;
                width: 160px;
                height: 40px;
                display: block;
                outline: none;
                float: right;
                border: none;
                border-radius: 5px;
                line-height: 42px;
                color: #fff;
                font-size: 18px;
                letter-spacing: 3px;
                padding-left: 3px;
                background: #252525;
                transition: all 0.4s;

                &:hover {

                  background: rgba(0, 0, 0, 0.5);

                }
              }
            }
          }

          .login_input {
            &:first-child {
              margin-top: 24px;
            }

            margin: 20px auto 0;
            width: 100%;
            line-height: 40px;

            .el-form-item__content {
              .iconfont {
                font-size: 24px;
                float: left;
                display: block;
                color: #121212;
                margin-left: 3px;
                margin-top: 2px;
              }

              margin-left: 0 !important;
              height: 100%;
              width: 100%;
              border: 1px solid #fff;
              background: #fff;
              border-radius: 5px;
              padding: 3px 0 3px 5px;

              .el-input {
                width: 90%;
                height: 100%;
                position: relative;
                display: inline-block;
                text-align: left;
                margin-top: 4px;

                input {
                  width: 100%;
                  height: 100%;
                  line-height: 36px;
                  height: 36px;
                  font-size: 16px;
                  color: #121212;
                  outline: none;
                  border: none;
                  padding-left: 10px;
                  background: transparent;

                  &::-webkit-input-placeholder {
                    color: #ccc;
                  }
                }
              }

              .code {
                position: absolute;
                right: 30px;
                top: 0;

                span {
                  display: block;
                  height: 36px;
                  width: 100px;
                  background: #fff;
                  float: right;
                  margin-right: 7px;
                }

                a {
                  color: #121212;
                  float: right;
                  text-decoration: underline;
                }
              }
            }
          }

          .el-form-item.is-error {
            .el-form-item__content {
              border-color: #f65f5f;
            }

            .el-input__validateIcon {
              color: #333;
            }
          }

          .el-form-item.is-success {
            .el-input__validateIcon {
              color: #333;
            }
          }

          .el-form-item__error {
            color: #f65f5f;
            padding-top: 7px;
          }
        }
      }
    }
  }

  .loginLoad {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    z-index: 10000;
    background: #1e1e1e;
    font-family: 'Open Sans Condensed', sans-serif;

    &::after {
      content: 'Loading';
      width: 100%;
      height: 200px;
      line-height: 200px;
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 0;
      margin: -100px 0 0 0;
      text-align: center;
      font-size: 5em;
      text-transform: uppercase;
      color: #7a96e4;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.07), 0 -1px 1px rgba(0, 0, 0, 0.4);
    }

    > div {
      width: 100%;
      height: 200px;
      line-height: 200px;
      position: absolute;
      color: #fff;
      top: 50%;
      left: 0;
      z-index: 9;
      margin: -100px 0 0 0;
      text-align: center;
      font-size: 5em;
      text-transform: uppercase;
      background: radial-gradient(50% 50%,
        rgba(255, 255, 255, 1) 0%,
        rgba(0, 198, 255, 1) 8%,
        rgba(0, 198, 255, 0.7) 9%,
        rgba(0, 198, 255, 0) 15%
      ),
      linear-gradient(top,
          rgba(0, 198, 255, 0) 0%,
          rgba(0, 198, 255, 0.01) 44%,
          rgba(0, 198, 250, 0.6) 49%,
          rgba(255, 255, 255, 1) 50%,
          rgba(0, 198, 255, 0.6) 51%,
          rgba(0, 198, 255, 0.01) 56%,
          rgba(0, 198, 255, 0) 100%
      );
      background-size: 100%;
      transition: background 0.3s;
      animation: pulse 1.4s;
      animation-iteration-count: infinite;
    }

    @keyframes pulse {
      0% {
        background-position: -140px;
        opacity: 0.02;
        background-size: 30%;
      }
      50% {
        opacity: 1;
        background-size: 150%;
      }
      100% {
        background-position: 140px;
        opacity: 0.02;
        background-size: 220%;
      }
    }
  }

  .login-error {
    width: 300px;
    padding: 20px;
    border-radius: 3px;
    //background:url(../img/login_input.png) transparent no-repeat;
    // background-size:100% 100%;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 20px rgba(0, 234, 255, .3);
    border-radius: 10px;
    border: 1px solid rgba(1, 234, 255, 0.6);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    @keyframes box-out-in {
      0% {
        box-shadow: 0px 3px 20px rgba(0, 234, 255, .3);
      }
      50% {
        box-shadow: 6px 3px 20px rgba(0, 234, 255, .7);
      }
      100% {
        box-shadow: 0px 3px 20px rgba(0, 234, 255, .3);
      }
    }
    animation: box-out-in 2s ease-in-out infinite;

    .el-notification__group {
      margin: 0;

      .el-notification__content {
        margin: 0;
        color: #fff;
        opacity: .9;
        font-size: 16px;
        text-shadow: 0 0 8px #ff0101, 0 0 12px #ff0101;

      }

      .el-notification__closeBtn {
        &:hover {
          opacity: 1;
          color: #ff0101;
        }

        color: #ff0101;
        opacity: .5;
        transition: 0.5s;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
</style>
<script>
  export default {
    data: function () {
      var checkAge = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入账号"));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          callback();
        }
      };
      var codecheck = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入验证码"));

        } else {
          callback();
        }
      };
      return {
        ruleForm2: {
          pass: "",
          user: "",
          // code:"",
        },
        rules2: {
          pass: [{validator: validatePass, trigger: "blur"}],
          user: [{validator: checkAge, trigger: "blur"}],
          code: [{validator: codecheck, trigger: "blur"}]
        },
        personLogin: {},          //个性化配置
        loginLoad: true,
      };
    },
    created() {
      this.getCheckV();
      if (localStorage.userName) {
        this.ruleForm2.user = localStorage.userName;
      }
    },
    mounted() {

    },
    components: {},
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    methods: {
      //登陆
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          //console.log(this.ruleForm2.user);
          if (valid) {
            this.$Bus.$emit("Loading", true);
            let mode = {};
            mode.u_name = this.ruleForm2.user;
            mode.u_pwd = this.ruleForm2.pass;
            this.$api.post("noauth/login", mode)
            .then(data => {
              if (data && data.msg == "success") {
                localStorage.token = data.data;
                window.token=data.data;
                sessionStorage.headerActive = "";
                localStorage.userName = this.ruleForm2.user;
                this.$router.replace({name: 'indexSkip'});
              } else {
                this.$Bus.$emit("Loading", false);
                this.ruleForm2.pass = "";
                this.$notify({
                  message: '登录失败：用户名或密码错误',
                  customClass: 'login-error',
                  duration: 3000
                });
                // this.$notify({
                //   message: '登录失败：此账号已禁用',
                //   customClass: 'login-error',
                //   duration: 3000
                // });
              }
            }).catch((err) => {
               console.log(err);
              this.$Bus.$emit("Loading", false);
            });
          } else {
            return false;
          }
        });
      },
      //重置登陆框
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //获取个性化设置
      getPersonConfig() {
        let url = 'noauth/get-system-personalise';
        this.$api.get(url)
        .then(data => {
          if (data.data) {
            if (Object.keys(data.data.data_value).length > 0) {
              //  let mode={};
              //  mode.loginLogoShow=data.data.data_value.loginLogoShow,
              //  mode.loginSite=data.data.data_value.loginSite;
              //  mode.loginbg=data.data.data_value.loginbg;
              //  mode.logo=data.data.data_value.logo;
              this.personLogin = data.data.data_value;
              this.setTitleLink(data.data.data_value.titleLink)
              localStorage.setItem('PersonConfig', JSON.stringify(data.data.data_value));
              this.$Bus.$emit('PersonChange');
            }
            this.loginLoad = false;

          } else {
            this.loginLoad = false;
          }

        }).catch(err => {
           console.log(err);
          this.loginLoad = false;
        })
      },
      setTitleLink(href) {
        let titleLink = document.getElementById('titleLink')
        // console.log(href,'href');
        titleLink.href = href ? href : 'static/img/favicon.jpg'
      },
      //获取系统设置版本号
      getCheckV() {
        this.$api.get('noauth/check-v')
        .then(data => {
          if (data == null) {
            this.loginLoad = false;
            localStorage.removeItem('PersonConfig');
            return
          }
          if (data.data == localStorage.checkV) {
            if (localStorage.PersonConfig) // 是否存在个性化配置
            {
              this.personLogin = JSON.parse(localStorage.PersonConfig);
              this.loginLoad = false;
            } else {
              this.getPersonConfig();
            }
          } else {
            this.getPersonConfig();
          }
          localStorage.checkV = data.data;
        })
        .catch(err => {
           console.log(err);
          this.loginLoad = false;
        })
      },
    },
    watch: {}
  };
</script>
